<template>
	<view class="app-container">
		<view class="title-box">欢迎登录熟客小优</view>
		<view class="input-box">
			<input class="login-input" v-model="loginForm.phone" type="number" placeholder="输入手机号" />
		</view>
		<view class="input-box">
			<input class="login-input code-input" v-model="loginForm.code" type="number" placeholder="输入验证码" />
			<uv-code ref="uCode" unique-key="login" @change="codeChange" seconds="60" keep-running @start="startTime"
				@end="endTime"></uv-code>
			<text class="tips" :class="canGetCode ? 'active' : ''" @click="getPhoneCode">{{ tips }}</text>
		</view>
		<view class="input-box">
			<button type="primary" hover-class="is-hover" @click="handleLogin">登录</button>
		</view>
		<view class="agreement-box flex">
			<uni-data-checkbox v-model="checked" :localdata="range" multiple />
			<text class="agreement" @click.stop="handleToPage('/pages/agreement/index?type=1')">《用户协议》</text>
			<text @click="handleAgrenn">和</text>
			<text class="agreement" @click.stop="handleToPage('/pages/agreement/index?type=2')">《隐私协议》</text>
		</view>
		<view class="login-by-wechat flex-column">
			<uv-divider text="手机号快捷登录" textSize="26rpx" textColor="var(--gray-font-color)"
				lineColor="#EBEDF2"></uv-divider>
			<image v-if="!checked.length" @click="handleLoginByWeChat" class="wechat" src="/static/icons/wechat-icon.png"></image>
			<button v-else open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">
				<image class="wechat" src="/static/icons/wechat-icon.png"></image>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs
	} from "vue";
	import {
		sendMobileCode
	} from "@/api";
	import UvCode from "@/uni_modules/uv-code/components/uv-code/uv-code.vue";
	import store from "@/store";
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const uCode = ref(null);

	const state = reactive({
		loginForm: {
			phone: "",
			code: "",
			ic: ""
		},
		wechatLoginForm: {
			wx_code: "",
			iv: "",
			encrypted_data: "",
			ic: ""
		},
		tips: "获取验证码",
		canGetCode: true,
		checked: [],
		range: [{
			value: "isPermision",
			text: "我已阅读并同意"
		}]
	});

	const {
		loginForm,
		wechatLoginForm,
		tips,
		canGetCode,
		checked,
		range
	} = toRefs(state);

	// 判断是否勾选协议
	function validateForm() {
		const pattern = /^1[3456789]\d{9}$/;
		if (!pattern.test(loginForm.value.phone)) {
			uni.showToast({
				title: "请输入正确的手机号码",
				icon: "none"
			})
			return false;
		} else if (!checked.value.length) {
			uni.showToast({
				title: "请阅读并同意隐私协议",
				icon: "none"
			})
			return false;
		}
		return true;
	}

	// 获取手机验证码
	async function getPhoneCode() {
		if (!validateForm()) return;
		if (uCode.value.canGetCode) {
			const res = await sendMobileCode({
				phone: loginForm.value.phone,
				type: 1
			});
			uCode.value.start();
		} else {
			uni.showToast({
				title: "倒计时结束后再重新获取",
				icon: "none"
			})
		}
	}

	// 提示文字改变
	function codeChange(text) {
		tips.value = text;
	}

	// 开始倒计时
	function startTime() {
		canGetCode.value = false;
	}

	// 倒计时结束
	function endTime() {
		canGetCode.value = true;
	}

	// 勾选协议
	function handleAgrenn() {
		if (!checked.value.length) {
			checked.value = ["isPermision"]
		} else {
			checked.value = []
		}
	}

	// 登录按钮操作
	async function handleLogin() {
		if (!loginForm.value.phone) {
			uni.showToast({
				title: "请输入手机号码",
				icon: "none"
			})
			return false;
		}
		const pattern = /^1[3456789]\d{9}$/;
		if (!pattern.test(loginForm.value.phone)) {
			uni.showToast({
				title: "请输入正确的手机号码",
				icon: "none"
			})
			return false;
		}
		if (!loginForm.value.code) {
			// 验证码登录
			uni.showToast({
				title: "请输入验证码",
				icon: "none"
			})
			return false;
		}
		if (!checked.value.length) {
			uni.showToast({
				title: "请阅读并同意用户及隐私协议",
				icon: "none"
			})
			return false;
		}
		await store.dispatch("LoginByPhone", loginForm.value);
	}

	// 获取手机号
	async function handleGetPhoneNumber(e) {
		if (e.detail.errMsg === "getPhoneNumber:ok") {
			wechatLoginForm.value.iv = e.detail.iv;
			wechatLoginForm.value.encrypted_data = e.detail.encryptedData;
			uni.hideLoading();
			await store.dispatch("LoginByWeChat", wechatLoginForm.value);
		} else {
			uni.showToast({
				title: "获取手机号失败",
				icon: "none"
			})
		}
	}
	
	// 点击微信授权登录
	function handleLoginByWeChat() {
		if (!checked.value.length) {
			uni.showToast({
				title: "请阅读并同意用户及隐私协议",
				icon: "none"
			})
			return false;
		}
	}
	
	onLoad((option) => {
		if(option.type === "share") {
			// 来自邀请有礼
			uni.showModal({
				title: "提示",
				content: `来自用户${option.username}的邀请，登录完成注册即可获得积分，离开无效！`,
				showCancel: false,
				success: () => {
					loginForm.value.ic = option.ic;
					wechatLoginForm.value.ic = option.ic;
				}
			})
		}
		uni.login({
			success: async (loginRes) => {
				wechatLoginForm.value.wx_code = loginRes.code;
			}
		})
	})
</script>

<style scoped lang="scss">
	.app-container {
		background-color: #FFFFFF;
		overflow-y: auto;

		.title-box {
			font-size: 60rpx;
			font-weight: bold;
			margin: 30% 70rpx 0;
			position: relative;
			z-index: 1;
			margin-bottom: 100rpx;

			&::before {
				content: "";
				width: 280rpx;
				height: 20rpx;
				background: linear-gradient(90deg, #53B324 0%, var(--primary-color) 0%, #FFFFFF 100%);
				position: absolute;
				left: 0;
				bottom: 10rpx;
				z-index: -1;
			}
		}

		.input-box {
			height: 90rpx;
			margin: 0 75rpx 40rpx;
			position: relative;

			.login-input {
				height: 100%;
				border-radius: 45rpx;
				background-color: #F2F5FA;
				padding: 0 40rpx;

				&.code-input {
					padding-right: 230rpx;
				}
			}

			.tips {
				font-size: 30rpx;
				color: var(--gray-font-color);
				position: absolute;
				right: 40rpx;
				top: 0;
				line-height: 90rpx;
			}

			.tips.active {
				color: #4C97FF;
			}
		}

		.agreement-box {
			width: 570rpx;
			height: 60rpx;
			margin: 0 auto;
			font-size: 24rpx;

			::v-deep .uni-data-checklist {
				.checklist-group .checklist-box {
					margin: 0;

					.checkbox__inner {
						width: 32rpx;
						height: 32rpx;
						border-radius: 16rpx;
					}

					.checklist-text {
						color: #333333;
						font-size: 24rpx;
					}

					&.is-checked .checklist-text {
						color: #333333;
					}
				}
			}

			.agreement {
				color: var(--primary-color);
			}
		}

		.login-by-wechat {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			align-items: center;

			::v-deep .uv-divider {
				width: 500rpx;
			}
			
			.wechat {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				margin-bottom: 60rpx;
			}

			button {
				padding: 0;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				margin-bottom: 60rpx;

				&::after {
					border: none;
				}

				.wechat {
					width: 100%;
					height: 100%;
					margin-bottom: 0;
				}
			}
		}
	}
</style>